<!DOCTYPE html>
<html>
<head>
    <title>bTabs入门指南</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
    
    <link rel="stylesheet" href="../css/btabs/header.css" />
    <link rel="stylesheet" href="../css/btabs/docs.css" />
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.github.io/btabs/index.html" class="navbar-brand">bTabs</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="javascript:void(0);" >入门</a>
                </li>
                <li>
                    <a href="demo.html" >实例</a>
                </li>
                <li>
                    <a href="docs.html" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.github.io" >主页</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/bTabs" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>

	<div class="content">
	<div class="container">
		<h1 class="text-center">入门指南</h1>

		<h3>资源导入 <small>在网页上引用css样式、js脚本等文件</small></h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<link rel="stylesheet" href="b.tabs.css" type="text/css">
<!-- 插件核心脚本 -->
<script type="text/javascript" src="b.tabs.js" >< /script>
]]>
</script>

		<h3>HTML代码</h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 菜单导航，非必须，具体使用时更换为具体的管件 -->
<div class="span2">
	<div class="well menuSideBar" style="padding: 8px 0px;">
		<ul class="nav nav-list" id="menuSideBar">
			<li class="nav-header">导航菜单</li>
			<li class="divider"></li>
			<li mid="tab1" funurl="${webroot}demo/manage/tabsPage1"><a tabindex="-1" href="javascript:void(0);">页面1</a></li>
			<li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a tabindex="-1" href="javascript:void(0);">页面2</a></li>
			<li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a tabindex="-1" href="javascript:void(0);">页面3</a></li>
		</ul>
	</div>
</div>
<!-- 标签页区域 -->
<div class="span10" id="mainFrameTabs">

	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<!-- 设置默认的首页标签页，设置noclose样式，则不会被关闭 -->
		<li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首页</a></li>
	</ul>
	
	<!-- Tab panes -->
	<div class="tab-content">
		<!-- 默认标签页（首页）的内容区域 -->
		<div class="tab-pane active" id="bTabs_navTabsMainPage">
			<div class="page-header">
				<h2 style="font-size: 31.5px;text-align: center;font-weight: normal;">欢迎使用</h2>
			</div>
			<div style="text-align: center;font-size: 20px;line-height: 20px;">
			Welcome to use bTabs plugin!
			</div>
		</div>
	</div>

</div>
]]>
</script>

		<h3>Javascript初始化插件代码</h3>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//导航区域项目点击增加标签页处理
//仅演示功能
$('a',$('#menuSideBar')).on('click', function(e) {
	e.stopPropagation();
	var li = $(this).closest('li');
	var menuId = $(li).attr('mid');
	var url = $(li).attr('funurl');
	var title = $(this).text();
	//校验登录是否超时，通常使用ajax访问服务端测试登录是否超时
	//若页面端已有超时自动跳转的处理，则不需要设置该回调
	var checkLogin = function(){
		....
	};
	$('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin);
});

//插件的初始化
$('#mainFrameTabs').bTabs({
	//登录界面URL，用于登录超时后的跳转
	'loginUrl' : 'http://xxx.com/login',
	//用于初始化主框架的宽度高度等，另外会在窗口尺寸发生改变的时候，也自动进行调整
	'resize' : function(){
		//这里只是个样例，具体的情况需要计算
		$('#mainFrameTabs').height(100);
	}
});
]]>
</script>








<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

	</div>
	</div>

    <footer class="footer">
        <div class="container">
        Copyright © 2016-2017 Terry Zeng
        </div>
    </footer>







<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript">
$(function(){
	SyntaxHighlighter.all();
});
</script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>